// 基础的使用
<template>
  <div id="labelManage">
    <div id="main">
        <div class="flowchart-demo" id="flowchart-demo">
            <div class="window" id="flowchartWindow1">1
            </div>
            <div class="window" id="flowchartWindow2">2
            </div>
            <div class="window" id="flowchartWindow3">3
            </div>
            <div class="window" id="flowchartWindow4">4
            </div>
        </div>
    </div>

  </div>
</template>
<script>
  import jsplumb from 'jsplumb'
  export default {
      data(){
        return {

        }
      },
      methods:{
          initChart(){
              jsPlumb.ready(()=>{
                  var options={
                        DragOptions: { cursor: 'pointer', zIndex: 2000 },
                        PaintStyle: { stroke: 'red', strokeWidth: 3 },  //配置自己拖拽小点的时候连接线的默认样式
                        Endpoint: ["Dot", {radius: 5}], //这个是控制连线终端那个小点的半径
                        // EndpointStyle : { fill : "red" }, //这个是控制连线终端那个小点的样式
                        // EndpointHoverStyle  : { fill : "blue" }, //这个是控制连线终端那个小点的样式
                        Connector: ["Flowchart",{curviness:70}],
                        ConnectionOverlays: [
                            [ "Arrow", { location: 1 } ],
                            [ "Label", {
                                location: 0.5,
                                label: "hehe",
                                id: "label",
                                cssClass: "aLabel"
                            }]
                        ],
                        Container:"flowchart-demo"
                    }
                  var instance=jsPlumb.getInstance(options)
                  
                  var window=document.querySelector(".window")
                  instance.draggable(window);

                  instance.addEndpoint('flowchartWindow1',{uuid:1 , anchor: "TopCenter",  isSource:true});
                  instance.addEndpoint('flowchartWindow2',{uuid:2 ,anchor:'Right', isTarget:true});
                  instance.addEndpoint('flowchartWindow3',{uuid:3,anthors:'Right', isTarget:true});
                    instance.connect({
                        uuids:[1,3],  //根据uuid进行连接
                        editable:true,
                        paintStyle: { stroke: 'red', strokeWidth: 3 },  //线的样式
                        endpointStyle: { fill: 'blue', outlineStroke: 'darkgray', outlineWidth: 2 },//点的样式
                        overlays: [ ['Arrow', { width: 12, length: 12, location: 0.5 }] ]   //覆盖物 箭头 及 样式
                    })

              })
          }
      },
      mounted(){
          this.initChart()

      }
  }
</script>

<style scoped lang="scss">
.flowchart-demo {
    width: 800px;
    height: 600px;
    border: 1px solid #000;
    position: relative;
}
.flowchart-demo .window {
    border: 1px solid #346789;
    box-shadow: 2px 2px 19px #aaa;
    -o-box-shadow: 2px 2px 19px #aaa;
    -webkit-box-shadow: 2px 2px 19px #aaa;
    -moz-box-shadow: 2px 2px 19px #aaa;
    -moz-border-radius: 0.5em;
    border-radius: 0.5em;
    opacity: 0.8;
    filter: alpha(opacity=80);
    text-align: center;
    position: absolute;
    background-color: #eeeeef;
    color: black;
    font-family: helvetica;
    font-size: 0.9em;
    line-height: 60px;
    width: 60px;
    height: 60px;
}
.flowchart-demo .window:hover {
    box-shadow: 2px 2px 19px #444;
    -o-box-shadow: 2px 2px 19px #444;
    -webkit-box-shadow: 2px 2px 19px #444;
    -moz-box-shadow: 2px 2px 19px #444;
    opacity: 0.6;
    filter: alpha(opacity=60);
}
.flowchart-demo .active {
    border: 1px dotted green;
}
.flowchart-demo .hover {
    border: 1px dotted red;
}

#flowchartWindow1 {
    top: 34em;
    left: 5em;
}
#flowchartWindow2 {
    top: 7em;
    left: 36em;
}
#flowchartWindow3 {
    top: 27em;
    left: 48em;
}
#flowchartWindow4 {
    top: 23em;
    left: 22em;
}

</style>
